<template>
    <div class="book-store">
        <!-- 页面头部组件 -->
        <com-header>
            <div
                class="sex-change"
                @click="$store.commit('user/inversertSex')">
                {{$store.state.user.sex==2?'女':'男'}}
            </div>
            <!-- 根据返回的数据，动态创建头部导航 -->
            <section class="tag-bar">
                <div 
                    v-for="item, index in $store.state.bStore.urls"
                    :key="getSymbol(index)"
                    :class="{'active':$store.state.bStore.activeIndex == index}"
                    @click="setActiveIndex(index)">
                    {{item.name}}
                </div>
            </section>
            <div><i class="iconfont icon-search"></i></div>
        </com-header>
        <!-- 根据返回的头部标签，来渲染对应的内容 -->
        <div 
            class="pages"
            v-if='$store.state.bStore.urls.length > 0'
            :style="{height:pageHeight+'px'}">
            <move-x class="page-container">
                <div
                    class="page"
                    v-for='item,index in $store.state.bStore.urls'
                    :key="index">
                    <book-store-page :idx='index'></book-store-page>
                </div>
            </move-x>
        </div>
        <div 
            class="loading"
            v-if="$store.state.bStore.urls.length == 0">
            <img src="@/assets/img/loading.gif" alt="">
        </div>
    </div>
</template>

<script>
import comHeader from '@/components/comHeader.vue'
import moveX from '@/components/moveX.vue'
import bookStorePage from '@/pages/bookStorePage.vue'
export default {
    name: 'bookStore',
    components: {
        comHeader,
        bookStorePage,
        moveX: moveX,
    },
    data() {
        return {
            wHeight: 0,
            rootSize: 0,
            pageHeight: 0,
            isLoading: true,
        }
    },
    methods: {
        // 加载头部导航里的标签
        loadNavItems() {
            axios.get('https://apis.netstart.cn/yunyuedu/store/navi.json?gender='+this.$store.state.user.sex)
                .then((success)=> {
                    // console.log('success',success);
                    this.$store.dispatch('bStore/setUrlAsync',success.data.navi);
                    // console.log(this.$store.state.bStore);
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        getSymbol(){
            return Symbol();
        },
        // 设置正在显示页面的下标
        setActiveIndex(i) {
            this.$store.commit('bStore/setActiveIndex',i);
        },
        // 获取屏幕高度
        getHeight() {
            this.wHeight = document.documentElement.clientHeight;
            this.rootSize = parseFloat(document.documentElement.style['fontSize']);
            // (120 / 37.5) = (x / rootSize)   x = (120/37.5) *rootSize
            let navHeight = (120/37.5) *this.rootSize; // 头尾导航栏的高度
            this.pageHeight = this.wHeight - navHeight;
            
            // console.log('this.wHeight',this.wHeight);
            // console.log('document.body.clientHeight',document.body.clientHeight);
            // console.log('document.documentElement.clientHeight',document.documentElement.clientHeight);
        }
    },
    created() {
        // console.log(this.$store);
        this.loadNavItems();
        this.getHeight();
        window.addEventListener('resize',this.getHeight);
    },
    destroyed() {
        window.removeEventListener('resize',this.getHeight)
    },
    computed: {
        sex() {
            return this.$store.state.user.sex;
        }
    },
    watch: {
        sex(v) {
            this.$store.commit('bStore/setUrls',[]);
            this.$store.commit('bStore/clearPages');
            this.loadNavItems();
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
// 页面头部
.tag-bar {
    font-size: 16px;
    .active {
        color: $color1;
        font-size: 22px;
        font-weight: bold;
        position: relative;
        &::after {
            content: '';
            display: block;
            position: absolute;
            height: 2px;
            width: 20px;
            bottom: -4px;
            left: 50%;
            margin-left: -10px;
            background-color: $color1;
            z-index: 99999;
        }
    }
}
.icon-search {
    font-size: 24px;
}
.sex-change {
    font-size: 16px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgb(121, 121, 121);
    color: #666;
    font-family: oppo-l;
    font-weight: bold;
}
// 页面内容
.pages {
    overflow: hidden;
    width: 100%;
    .page-container {
        // width: 1000px;
        display: flex;
        // overflow: visible;
        transform: translateX(0%);
    }
    .page {
        // position: fixed;
        // height: ;
        width: 100%;
        flex-shrink: 0;
    }
}
.loading {
    width: 100%;
    height: 100%;
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
}
</style>